// http://localhost:3000/Blackhole
import React from 'react';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import Page from '../../components/Page';
import PageHeader from '../../components/PageHeader';
import Bank from '../Bank';
import BankCards from './BankCards';
import BankCards1 from './BankCards1';
import { useWallet } from 'use-wallet';
import Button from '../../components/Button';
import styled from 'styled-components';

import banner_blackhole from '../../assets/image/banner_blackhole.png';
import h5banner_blackhole from '../../assets/image/h5banner_blackhole.png';
import config from '../../config';
import LaunchCountdown from '../../components/LaunchCountdown';
import StarHeader from "../../components/Star/StarHeader";
import {openGroup} from "../Banks/Banks";
import StarLock from "../../components/Star/StarLock";
import {planeConfigs} from "../../components/Star/StarHeader";
import useLiquidityOracle from '../../hooks/useLiquidityOracle';
import useLiquidityOracleTVLine from '../../hooks/useLiquidityOracleTVLine';

const Banks: React.FC = () => {
  const { path } = useRouteMatch();
  const { account, connect } = useWallet();
  let titHd: number = (localStorage.getItem('titHd') == null)? 2 : parseInt(localStorage.getItem('titHd'));
    const [group,setGroup] = React.useState(planeConfigs[titHd].group);
    config.group = group;
    const liquidityOracle = useLiquidityOracle();
    const enable = useLiquidityOracleTVLine(config.group);
  return (
    <Switch>
      <Page>
        <Route exact path={path}>
          {/* <PageHeader
            icon={<img
            src={banner_nebula}
            alt='logo'
            width={1920}
          />}
            title=""
            subtitle=""
          /> */}
          <StyleDiv1>
        <img
          src={banner_blackhole}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
        <div
          style={{textAlign:'center',color:'orange',fontSize:18,fontWeight:'bold'}}
        >黑洞警告：你的捐赠物进入合约后将无法取回</div>
      </StyleDiv1>

      <StyleDiv2>
        <img
          src={h5banner_blackhole}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />

      </StyleDiv2>
          
          {!!account ? (
                  <React.Fragment>
                      <StarHeader
                          selected={ titHd }
                          onItemChange={(item,index)=>{
                            localStorage.setItem('titHd', index+'');
                              config.group= item.group;
                              setGroup(item.group)
                          }}
                      ></StarHeader>
                      {openGroup.includes(group) && Date.now() >= config.plane[config.group].blackHoleStartAt.getTime() ? (
                              <Center2>
                                {
                                  Date.now() < config.plane[config.group].boardroomLaunchesAt.getTime() ?
                                  (<></>)
                                  :
                                  (<BankCards1 />)
                                }
                                <BankCards />
                              </Center2>
                          )
                          :
                          (<StarLock baseNum={Number(liquidityOracle)} enable={enable} startTime={config.plane[config.group].blackHoleStartAt ? config.plane[config.group].blackHoleStartAt.getTime() : 0}></StarLock>)}
                      {/*<Center2>*/}
                      {/*    <BankCards1 />*/}
                      {/*    <BankCards />*/}
                      {/*</Center2>*/}
                  </React.Fragment>
          ) : (
            <Center>
              <Button onClick={() => connect('injected')} text="连接钱包" />
            </Center>
          )}
        </Route>
        <Route path={`${path}/:bankId`}>
          <Bank />
        </Route>
      </Page>
    </Switch>
  );
};

const Center2 = styled.div`
  @media (max-width: 768px) {
    width: 100%;
  }
`;

const StyleDiv1 = styled.div`
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  @media (max-width: 768px) {
    display: none;
  }
`

const StyleDiv2 = styled.div`
  display: none;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  margin-top: -70px;
  @media (max-width: 768px) {
    display: block;
  }
`

const Center = styled.div`
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-bottom: 80px;
`;

export default Banks;
